	<template>
  <div>
    <div class="top">
      <div style="width: 60px" @click="returnTap">取消</div>
      <span>群管理</span>
      <van-button type="info" style="height: 30px" @click="returnTap"
        >完成</van-button
      >
    </div>
    <div class="tip">
      <van-icon class="tipIcon" name="user-circle-o" />
      <span>群管理员</span>
    </div>
    <div class="tishii">
      <span>群管理员可以拥有以下权利：</span>
      <span>1.100人以上群聊修改群名称</span>
      <span>2.发表群公告</span>
      <span>3.设置进群方式，并可确认进群申请</span>
      <span>4.移除群成员</span>
    </div>
    <div class="line"></div>
    <div class="photoList">
      <div class="photo">
        <img src="../../assets/images/logo.png" alt="" />
        <span>小明</span>
      </div>
      <div class="photo">
        <img src="../../assets/images/logo.png" alt="" />
        <span>小明</span>
      </div>
      <div class="photoAdd" @click="guanliAdd">+</div>
      <div class="photoAdit" @click="guanliAdit">-</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
    guanliAdd() {
      this.$router.push("/guanliadd");
    },
    guanliAdit() {
      this.$router.push("/guanliadit");
    },
  },
};
</script>
<style scoped>
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #eeeeee;
}
.tip {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tipIcon {
  font-size: 120px;
  margin-top: 40px;
  color: #4ba732;
}
.tip span {
  margin-top: 10px;
}
.tishii {
  margin-top: 20px;
  margin-left: 5%;
  color: #929292;
  font-size: 15px;
}
.tishii span {
  margin-top: 5px;
  display: block;
}
.line {
  width: 100%;
  height: 5px;
  background: #eeeeee;
  margin-top: 20px;
}
.photoList {
  display: flex;
  flex-wrap: wrap;
}
.photo {
  margin-left: 20px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.photo img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.photo span {
  font-size: 13px;
}
.photoAdd {
  margin-left: 20px;
  margin-top: 10px;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  text-align: center;
  line-height: 60px;
  font-size: 40px;
  color: #b6b6b6;
  border: 1px solid #b6b6b6;
}
.photoAdit {
  margin-left: 20px;
  margin-top: 10px;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
  color: #b6b6b6;
  border: 1px solid #b6b6b6;
}
</style>